@mixin et-menu-item-padding($topBottom, $leftRight) {
  padding: $topBottom $leftRight;
}

@mixin et-submenu-arrow($top: null) {
  font-family: "iconfont";
  content: $et-nav-has-child-icon;
  font-size: 1.5rem;
  position: absolute;
  @if $top {
    top: $top;
  }
  right: 0.5rem;
  transition: all 0.2s;
}

@mixin et-submenu-shadow {
  box-shadow: inset 0 0 8px -2px #000;
}

@mixin et-color-setting($txt-color, $bgcolor) {
  color: $txt-color;
  background-color: $bgcolor;
}

@mixin et-nav-icon($size, $padding-bottom) {
  font-size: $size;
  line-height: $size;
  padding-bottom: $padding-bottom;
}

@mixin et-narrow-nav {
  aside {
    width: $et-nav-narrow-width;
    transition: all 0.2s;

    .et-logo {
      i {
        font-size: $et-small-logo-size;

        &:first-child {
          position: absolute;
          left: 25%;
        }
      }

      span {
        display: none;
      }

      .et-title {
        transform: scale(0) translate3d(0, 0, 0);
        font-size: 0;
      }
    }

    &:hover {
      width: $et-nav-width;
      transition: all 0.2s;

      .et-logo {
        i {
          font-size: $et-logo-size;

          &:first-child {
            position: static;
          }
        }

        span {
          display: inline;
        }

        .et-title {
          display: initial;
          font-size: 0.875rem;
        }
      }

      li > a {
        @include et-menu-item-padding(1.25rem, 0);
        i {
          @include et-nav-icon($et-nav-icon-size, 0.5rem);
        }
        span {
          display: block;
        }

        &[data-has-children]:after {
          content: $et-nav-has-child-icon
        }
      }

      ul.menu-2[aria-hidden="false"], ul.menu-3[aria-hidden="false"] {
        display: block!important;
      }
    }

    ul.menu-2, ul.menu-3 {
      display: none!important;
    }

  }

  .et-main-content {
    padding-left: $et-nav-narrow-width;
    transition: all 0.2s;
  }

  .et-top-bar {
    left: $et-nav-narrow-width;
  }

  .et-nav-wrap li {
    & > a {
      &[data-has-children]:after {
        content: none;
      }

      & > i {
        @include et-nav-icon($et-nav-small-icon-size, 0);
      }

      span {
        display: none;
      }

      padding: 1rem 0;

    }
  }

  .et-btm-bar {
    .btm-ops-wrapper, .popup-layer {
      width: calc(100% - #{$et-nav-narrow-width});
    }
  }
}

@mixin et-height($height) {
  height: $height;
  line-height: $height;
}

@mixin et-drawer-submenu($padding-left, $font-size) {
  padding-left: $padding-left;
  font-size: $font-size;
}

@mixin et-menu-item-active {
  content: '';
  border-left: 4px solid $primary-color;
  height: 100%;
  position: absolute;
  left: 0;
  display:block;
  z-index: 100;
  @include et-nav-animation;
}

@mixin et-nav-animation($color: $primary-color, $speed: 0.2s) {
  border-left: 4px solid $color;
  animation: et-menu-animation $speed;
}

@keyframes et-menu-animation {
  from {
    border-left: 0;
  }

  to {
    border-left: 4px solid $primary-color;
  }
}

@mixin et-hide-char {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin et-page-content-width {
  width: calc(100% - #{$et-nav-width});
  @include breakpoint(small only) {
    width: 100%;
  }

  @include breakpoint(medium only) {
    width: calc(100% - #{$et-nav-narrow-width});
  };
};

@mixin et-badge($top: null, $left: null, $padding: null, $position: static, $color: $alert-color) {
  position: $position;

  @if $top {
    top: $top;
  }

  @if $left {
    left: $left;
  }

  @if $padding {
    padding: $padding;
  }

  background-color: $color;
  font-size: 0.75rem;
  font-weight: bold;
  min-width: 1rem;
}

@mixin et-backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
